<template>

  <div>

    房产信息
    <el-button type="warning" style="margin-left: 60px" @click="searchSfListByXy">收房合同查询</el-button>
    <hr><br>
    <el-form :model="shouruleForm" :inline="true" :rules="rules" ref="formData" label-width="110px" class="demo-ruleForm">

      <el-form-item label="小区名称" prop="premiseName" style="width: 50%">
        <el-input v-model="shouruleForm.premiseName" style="width: 200px" :disabled="true"></el-input>
      </el-form-item>

      <el-form-item label="房产信息" prop="houseName" style="width: 500px">
        <el-input v-model="shouruleForm.houseName" style="width: 200px" :disabled="true"></el-input>
      </el-form-item>

      <el-form-item label="所有权类型" prop="houseType" style="width: 50%">
        <el-select v-model="shouruleForm.houseType" placeholder="请选择" style="width: 200px">
          <el-option label="国有房产" value="1" key="1" />
          <el-option label="直管房产" value="2" key="2" />
          <el-option label="自管房产" value="3" key="3" />
          <el-option label="军队房产" value="4" key="4"/>
          <el-option label="集体所有房产" value="5" />
          <el-option label="私有(自由)房产" value="6" />
          <el-option label="港、澳、台投资房产" value="7" />
          <el-option label="涉外房产" value="8" />
          <el-option label="其他房产" value="9" />
        </el-select>
      </el-form-item>

      <el-form-item label="房产证书编号" prop="houseZsNo" style="width: 500px">
        <el-input v-model="shouruleForm.houseZsNo" placeholder="请填写房产证书上地址" style="width: 200px"></el-input>
      </el-form-item>

      <el-form-item label="产权地址" prop="cqAddress" style="width: 50%">
        <el-input v-model="shouruleForm.cqAddress" placeholder="请填写房产证书上地址" style="width: 200px"></el-input>
      </el-form-item>

    <br>
    业主信息
    <hr><br>

      <el-form-item label="业主姓名" prop="ownerName" style="width: 42.7%">
        <el-input v-model="shouruleForm.ownerName" placeholder="请输入业主姓名"></el-input>
      </el-form-item>

      <el-form-item label="" prop="certificateType" style="width: 100px">
        <el-select v-model="shouruleForm.certificateType" placeholder="证件类型类型" clearable size="small" style="width: 100px">
          <el-option  value="1" label="身份证" key="1"></el-option>
          <el-option value="护照" label="护照"></el-option>
          <el-option value="台胞证" label="台胞证"></el-option>
          <el-option value="港澳通行证" label="港澳通行证"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="业主身份证号" prop="ownerIdCard" style="">
        <el-input v-model="shouruleForm.ownerIdCard" placeholder="请输入业主身份证号"></el-input>
      </el-form-item>

      <el-form-item label="业主手机号" prop="ownerMobile" style="width: 50%">
        <el-input v-model="shouruleForm.ownerMobile" placeholder="请输入业主手机号"></el-input>
      </el-form-item>

      <el-form-item label="业主联系地址" prop="ownerContactAddress" style="width: 500px">
        <el-input v-model="shouruleForm.ownerContactAddress" placeholder="请输入业主联系地址"></el-input>
      </el-form-item>

      <el-form-item label="签约人" prop="signUserName" style="width: 42.7%">
        <el-input v-model="shouruleForm.signUserName" placeholder="请输入签约人"></el-input>
      </el-form-item>

<!--      与业主用的同一字段   certificateType-->
      <el-form-item label="" prop="certificateType" style="width: 100px">
        <el-select v-model="shouruleForm.certificateType" placeholder="证件类型类型" clearable size="small" style="width: 100px">
          <el-option value="1" label="身份证"></el-option>
          <el-option value="2" label="护照"></el-option>
          <el-option value="3" label="台胞证"></el-option>
          <el-option value="4" label="港澳通行证"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="签约人证件号" prop="signUserIdCard">
        <el-input v-model="shouruleForm.signUserIdCard" placeholder="请输入签约人证件号"></el-input>
      </el-form-item>

      <el-form-item label="签约人手机号" prop="signUserMobile" style="width: 50%">
        <el-input v-model="shouruleForm.signUserMobile" placeholder="请输入签约人手机号"></el-input>
      </el-form-item>

      <el-form-item label="紧急联系电话" prop="signUserEmergencyPhone" style="width: 500px">
        <el-input v-model="shouruleForm.signUserEmergencyPhone" placeholder="请输入紧急联系电话"></el-input>
      </el-form-item>

      <el-form-item label="账户类型" prop="accountType" style="width: 100%">
        <el-select v-model="shouruleForm.accountType" placeholder="请选择账户类型" style="width: 200px">
          <el-option label="请选择" value="A"></el-option>
          <el-option label="对公账户" value="H"></el-option>
          <el-option label="对私账户" value="F"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="开户省份" v-if="shouruleForm.accountType !='A'" style="width: 50%">
        <el-select v-model="shouruleForm.bankAccountProvince" placeholder="请选择开户省份" style="width: 200px">
          <el-option label="请选择" value=""></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="银行名称" v-if="shouruleForm.accountType !='A'" style="width: 500px">
        <el-select v-model="shouruleForm.bankName" placeholder="请选择银行名称" style="width: 200px">
          <el-option label="请选择" value="" ></el-option>
        </el-select>
      </el-form-item>
        <!-- bankOpen -->
      <el-form-item label="开户支行" v-if="shouruleForm.accountType == 'H'" style="width: 50%">
        <el-input v-model="shouruleForm.bankOpen" placeholder="请输入开户支行" style="width: 200px"></el-input>
      </el-form-item>

      <el-form-item label="联行行号"   v-if="shouruleForm.accountType == 'H'" style="width: 500px">
        <el-input v-model="shouruleForm.bankBranchCodeLh" placeholder="请输入联行行号" style="width: 200px"></el-input>
      </el-form-item>

      <el-form-item label="账号姓名"  v-if="shouruleForm.accountType !='A'" style="width: 50%">
        <el-input v-model="shouruleForm.accountName" placeholder="请输入账号姓名" style="width: 200px"></el-input>
      </el-form-item>

      <el-form-item label="银行卡号"  v-if="shouruleForm.accountType !='A'">
        <el-input v-model="shouruleForm.bankCardNumber" placeholder="请输入银行卡号" style="width: 200px"></el-input>
      </el-form-item>

    <br>
    租约信息
    <hr><br>

<!--      :default-time="newDate"-->
      <el-form-item label="租约期限" >
        <el-date-picker  v-model="shouruleForm.startDate" type="date" clearable size="small" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择租约期限" style="width: 200px"></el-date-picker>
      </el-form-item>
      至
      <el-form-item style="margin-left: 10px">
        <el-date-picker v-model="shouruleForm.endDate" clearable type="date" size="small" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择租约期限" style="width: 200px"></el-date-picker>
      </el-form-item>

      <el-button @click="one(1)" style="width: 70px">一年</el-button>
      <el-button @click="one(2)" style="width: 70px">二年</el-button>
      <el-button @click="one(3)" style="width: 70px">三年</el-button>
      <el-button @click="one(4)" style="width: 70px">四年</el-button>
      <el-button @click="one(5)" style="width: 70px">五年</el-button>
      <br>

      <el-form-item label="租金" prop="monthRent" style="width: 50%">
        <el-input v-model.number="shouruleForm.monthRent" placeholder="请输入"></el-input>
      </el-form-item>

      <el-form-item label="房产押金" prop="depositMoney" style="width: 500px">
        <el-input v-model.number="shouruleForm.depositMoney" placeholder="请输入" :disabled="true" style="width: 200px"></el-input>
      </el-form-item>

      <el-form-item label="支付方式" prop="depositType">
        押
        <el-select v-model.number="shouruleForm.depositType" :disabled="true" style="width: 100px">
          <el-option label="1" value="1"></el-option>
          <el-option label="2" value="2"></el-option>
          <el-option label="3" value="3"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="depositType">
        付
        <el-select v-model.number="shouruleForm.paymentType" style="width: 100px">
          <el-option label="1" value="1"></el-option>
          <el-option label="2" value="2"></el-option>
          <el-option label="3" value="3"></el-option>
          <el-option label="4" value="4"></el-option>
          <el-option label="5" value="5"></el-option>
          <el-option label="6" value="6"></el-option>
        </el-select>
      </el-form-item>
      <br>
      <el-form-item label="备注">
        <el-input type="textarea" v-model="shouruleForm.remark" style="width: 500px;"></el-input>
      </el-form-item>

      <br>
      <el-form-item>
        <el-button type="warning" @click="userControlNext('formData')" style="margin-left: 1000px">下一步</el-button>
      </el-form-item>
      <span slot="footer" class="dialog-footer" style="margin-left: 70%">

    </span>

    </el-form>

    <!--    收房合同查询列表显示-->
    <el-dialog title="收房合同查" style="margin-top: 200px" :visible.sync="searchVisible" width="40%"  :before-close="handleClose">

      <el-form ref="form" label-width="70px" :title="true" size="mini" inline :model="Search" >
        <el-form-item label="小区名称"><el-input v-model="Search.premiseName" @keyup.enter.native="searchSfListByXy"></el-input></el-form-item>
        <el-form-item label="业主姓名"><el-input v-model="Search.ownerName" @keyup.enter.native="searchSfListByXy"></el-input></el-form-item>
        <el-form-item><el-button type="warning" @click="searchSfListByXy">查询</el-button></el-form-item>
      </el-form>

      <el-table :data="searchData" stripe style="width: 100%">
        <el-table-column prop="ownerName" label="业主姓名"></el-table-column>
        <el-table-column prop="houseName" label="房产信息"></el-table-column>
        <el-table-column prop="leaseType" label="租房类型"></el-table-column>
        <el-table-column prop="conSignTime" :formatter="carTimeFilter" label="签约日期"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="slot">
            <el-link @click="xz(slot.row.id)" type="warning">选中</el-link>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        style="margin-left: 55%"
        :small="Search.flay"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="Search.pageNum"
        :page-size="Search.pageSize"
        layout="prev, pager, next ,jumper"
        :total="Search.total">
      </el-pagination>

    </el-dialog>
  </div>

</template>

<script>
import {getSearchSfListByXy , getSFContractDteailSet} from "@/api/home/contract";
import dayjs from 'dayjs';

export default {
  //通过this直接调用
  props:["activeName"],
  name: "userControl",
  data(){
    return {
      searchVisible:false,
      searchData:[],
      //查询条件
      Search:{
        flay:false,
        total:0,
        pageNum:1,
        pageSize:6,
        premiseName:"",
        ownerName:""
      },
      //form表单数据
      shouruleForm:{
        accountType:"A",
        certificateType:"1",

        premiseName:"",
        houseInfo:"",
        houseType:"",
        houseZsNo:"",
        cqAddress:"",

        ownerName:"",
        ownerIdCard:"",
        ownerMobile:"",
        ownerContactAddress:"",
        signUserName:"",
        signUserIdCard:"",
        signUserMobile:"",
        signUserEmergencyPhone:"",

        startDate:"",
        endDate:"",
        monthRent:"",
        depositMoney:"",
        depositType:"",
        paymentType:"",
      },
      /**
       * 小区名称       房产信息   所有权类型  房产证书编号  产权地址
       * premiseName houseInfo houseType houseZsNo cqAddress
       *
       * 业主姓名    业主身份证号   业主手机号    业主联系地址			  签约人       签约人证件号      签约人手机号      紧急联系电话
       * ownerName ownerIdCard ownerMobile ownerContactAddress signUserName signUserIdCard signUserMobile signUserEmergencyPhone
       *
       * 租约期限    结束时间  租金        房产押金      押           付
       * startDate endDate monthRent depositMoney depositType paymentType
       *
       */
      rules: {
        premiseName:[{ required: true ,min: 1, max: 10, message: '不能为空', trigger: 'change' }],
        houseName:[{required: true , min: 1, max: 10, message: '不能为空', trigger: 'change' }],
        houseType:[{required: true , min: 1, max: 10, message: '不能为空', trigger: 'change' }],
        houseZsNo:[{required: true , min: 1, max: 10, message: '不能为空', trigger: 'change' }],
        cqAddress:[{required: true , min: 1, max: 10, message: '不能为空', trigger: 'change' }],

        ownerName:[{required: true , min: 1, max: 100, message: '不能为空', trigger: 'change' }],
        ownerIdCard:[{required: true , min: 1, max: 100, message: '不能为空', trigger: 'change' }],
        ownerMobile:[{required: true , min: 1, max: 100, message: '不能为空', trigger: 'change' }],
        ownerContactAddress:[{required: true , min: 1, max: 100, message: '不能为空', trigger: 'change' }],
        signUserName:[{required: true , min: 1, max: 100, message: '请与业主信息保持一致', trigger: 'change' }],
        signUserIdCard:[{required: true , min: 1, max: 100, message: '不能为空', trigger: 'change' }],
        signUserMobile:[{required: true , min: 1, max: 100, message: '不能为空', trigger: 'change' }],
        signUserEmergencyPhone:[{required: true , min: 1, max: 100, message: '不能为空', trigger: 'change' }],

        startDate:[ { type: 'date', required: true, message: '请选择日期', trigger: 'changed' }],
        endDate:[ { type: 'date', required: true, message: '请选择日期', trigger: 'changed' }],
        monthRent:[{ required: true, message: '年龄不能为空'}, { type: 'number', message: '年龄必须为数字值'}],
        depositMoney:[{ required: true, message: '年龄不能为空'}, { type: 'number', message: '年龄必须为数字值'}],
        depositType:[{ required: true, message: '年龄不能为空'}, { type: 'number', message: '年龄必须为数字值'}],
        paymentType:[{ required: true, message: '年龄不能为空'}, { type: 'number', message: '年龄必须为数字值'}],
      }
    }
  },
  methods: {
    //选中
    xz(val){
      getSFContractDteailSet({sfContractId:val}).then(res=>{
        this.shouruleForm = res.data.contrac
        this.shouruleForm.accountType="A"
        var data = new Date();
        var da = data.getFullYear()+"-"+(data.getMonth()+1)+"-"+(data.getDate()+2)
        this.shouruleForm.startDate=da
        this.shouruleForm.certificateType="1"
        this.shouruleForm.houseType=this.shouruleForm.houseType+""
        this.searchVisible=false
      })
    },
    //下一页
    userControlNext(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit("userControlNext" , "2")
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //收房合同查询
    searchSfListByXy(){
      getSearchSfListByXy(this.Search).then(res=>{
        this.searchData = res.rows
        this.Search.total = res.total
      })
      this.searchVisible = true
    },
    //关闭 收房合同列表
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    //设置签约日期格式
    carTimeFilter(row) {
      return dayjs(row.conSignTime).format("YYYY-MM-DD")
    },
    //分页
    handleCurrentChange(val) {
      this.Search.pageNum = val
      this.searchSfListByXy()
      console.log(`当前页: ${val}`);
    },
    handleSizeChange(val) {
      this.Search.pageSize = val
      this.searchSfListByXy()
      console.log(`每页 ${val} 条`);
    },
    // 格式化时间，加y年、加m月、减d天
    convertToLateDate(y) {
      // var data = new Date();
      // var Da = new Date(data.getTime() + 24 * 60 * 60 * 1000 * 30);
      // 以上两行代码为关键代码，若想要返回一天后的时间，则可以将第二行代码更换为下面代码
      // var Da = new Date(data.getTime() + 24 * 60 * 60 * 1000 * 2);
      // 若是想要返回值为当前时间，则上面两行代码可以直接修改为下面代码即可。
      var Da = new Date(this.shouruleForm.startDate)
      var y = Da.getFullYear() + y;
      var m = Da.getMonth() + 1;
      var d = Da.getDate() - 1;
      return y + "-" + m + "-" + d ;
    },
    one(val){
      if(val==1){
        this.$set(this.shouruleForm , "endDate" , this.convertToLateDate(1))
      }else if(val==2){
        this.$set(this.shouruleForm , "endDate" , this.convertToLateDate(2))
      }else if(val==3){
        this.$set(this.shouruleForm , "endDate" , this.convertToLateDate(3))
      }else if(val==4){
        this.$set(this.shouruleForm , "endDate" , this.convertToLateDate(4))
      }else if(val==5){
        this.$set(this.shouruleForm , "endDate" , this.convertToLateDate(5))
      }

    },
    setStartDate(val){
      // alert(this.shouruleForm.startDate)
      this.$set(this.shouruleForm,"startDate",this.shouruleForm.startDate)
    },
  },
}
</script>

<style scoped>

</style>
